<%-- 
    Document   : HalamanUtamaAri
    Created on : Nov 21, 2013, 4:41:48 AM
    Author     : arie
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Halaman Utama User</title>
        <link rel="shortcut icon" href="images/favicon.jpg">

        <%-- CSS View --%>
        <link rel="stylesheet" media="screen" href="css/stylesAboutUS.css" />
        <link rel="stylesheet" media="screen" href="css/styles.css" />
        <script>  
            /*1 pria 2 wanita
            3 tidak ada 4 ibu hamil 5 select ibu hamil
            6 menyusui 7 select ibu menyusui */
           
            function ShowWoment1(){
                if(document.getElementById(2).checked){
                    document.getElementById("hideablearea").style.visibility = "visible";
                    document.getElementById("hideablearea1").style.visibility = "visible";
                    document.getElementById("hideablearea2").style.visibility = "visible";
                    document.getElementById("hideablearea3").style.visibility = "visible";
                    document.getElementById('4').checked=false
                    document.getElementById('5').disabled=true;
                    document.getElementById('6').checked=false;
                    document.getElementById('7').disabled=true;
                    
                }
                 
            }
            function HideWoment(){
                if(document.getElementById(1).checked){
                    document.getElementById("hideablearea").style.visibility = "hidden";
                    document.getElementById("hideablearea1").style.visibility = "hidden";
                    document.getElementById("hideablearea2").style.visibility = "hidden";
                    document.getElementById("hideablearea3").style.visibility = "hidden";
                }
            }
            function tidakada(){
                if(document.getElementById(3).checked){
                    document.getElementById('4').disabled=true;
                    document.getElementById('5').disabled=true;
                    document.getElementById('6').disabled=true;
                    document.getElementById('7').disabled=true;
                    document.getElementById('4').checked=false
                    document.getElementById('5').checked=false;
                    document.getElementById('6').checked=false;
                    document.getElementById('7').checked=false;
                     
                }
                else{
                    document.getElementById('4').disabled=false;
                    document.getElementById('5').disabled=true;
                    document.getElementById('6').disabled=false;
                    document.getElementById('7').disabled=true;
                }
            }
            function ibuhamil1(){
                if(document.getElementById(4).checked){
                    document.getElementById('5').disabled=false;
                    document.getElementById('6').disabled=true;
                    document.getElementById('7').disabled=true;
                }
                else{
                    document.getElementById('4').disabled=false;
                    document.getElementById('5').disabled=true;
                    document.getElementById('6').disabled=false;
                    document.getElementById('7').disabled=true;            
                }
            }
            function ibumenyusui1(){
                if(document.getElementById(6).checked){
                    document.getElementById('4').disabled=true;
                    document.getElementById('5').disabled=true;
                    document.getElementById('7').disabled=false;
                }
                else{
                    document.getElementById('4').disabled=false;
                    document.getElementById('5').disabled=true;
                    document.getElementById('6').disabled=false;
                    document.getElementById('7').disabled=true;
                }
            }
        
            
            /*1 pria 2 wanita
            3 tidak ada 
            4 ibu hamil 5 select ibu hamil
            6 ibu menyusui 7 select ibu menyusui */
        </script>
    </head>
    <body style="background-image:url(images/headerme.jpg); no-repeat center center fixed; #fff;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          background-attachment:fixed;"> 

        <form action="HasilCekGizi.jsp" method="post" class="contact_form" name="contact_form" id="input">
            <table border="0" cellspacing="5" cellpadding="5" align="center" width="75%" height="580">

                <tr>
                    <td colspan="3" width="100px" height="180px" align="center" style="background-image:url(images/header4.jpg); background-position:justify;"></td></tr>

                <td colspan="3" width="1%" height="1%" align="align" style="font-size:20px" bgcolor="#1142aa">


                    <div id="TabView" class="TabView">
                        <div style="width: 100px;" class="Tabs">
                            <div id='menubar'>
                                <a href='HalamanUtamaUser.jsp'><span style="color: #000000">CEK GIZI</span></a>
                                <a href='KamusGiziUser.jsp'><span style="color: #000000">KAMUS GIZI</span></a>
                                <a href='Bantuan.jsp'><span style="color: #000000">BANTUAN</span></a>
                                <a href='TentangKita.jsp'><span style="color: #000000">TENTANG KITA</span></a>
                            </div>
                        </div>
                    </div>

                    </tr>

                <td rowspan="4" width="30%" height="370" align="justify" style="background-color:#6C8DD5;"><font color=white><center><br><b>KALKULATOR GIZI</b></center>
                <br>
                Menghitung Angka Kecukupan Gizi (AKG) Anda untuk memberi informasi mengenai kalori yang dibutuhkan oleh tubuh Anda.
                <br>Perhitungan AKG berdasarkan faktor-faktor usia, berat bedan, tinggi badan, jenis kelamin dan tingkat aktivitas. 
                <br>Begitu hasil AKG Anda ditetapkan, akan ditampilkan contoh menu sesuai AKG Anda yang harus diterapkan sebagai acuan dalam menu keseharian Anda. 
                <br>Anda dapat mencetak hasil AKG Anda saat itu beserta contoh menu dari kami.
                <br>Anda juga dapat melihat rincian kalori beserta kadar karbohidrat, lemak, dan protein untuk semua makanan.
                <br>Anda dapat menghitung ulang atau mengubah AKG setiap saat dan perkembangan Anda dimasa yang akan datang akan didasarkan pada AKG baru Anda. </td>


                <td rowspan="4" width="50%" height="370" align="center" style="background-color:#06276f;">

                    <table>
                        <font color=white><h1><p style="font-family:Alien Encounters">IDENTITAS DIRI</h1></p>
                        <hr>

                        <tr>
                            <td><label><b><font color=white>NAMA</b></label></td>
                            <td><b><font color=white>:</b></td>
                            <td><input type="text" name="name" placeholder="(nama)"pattern="[a-zA-Z]{1,100}" required />
                                <span class="form_hint">Masukkan nama anda</span>
                            </td>
                        </tr>
                        <tr>
                            <td><label><b><font color=white>USIA</b></label></td>
                            <td><b><font color=white>:</b></td>
                            <td><input class="usia" type="text" name="usia" value="" placeholder="(tahun)" pattern="[0-9]{1,3}" required />
                                <span class="form_hint">Masukan umur maksimal 3 digit</span>
                            </td>
                        </tr>
                        <tr>
                            <td><label><b><font color=white>JENIS KELAMIN</b></label></td>
                        </td><td><b><font color=white>:</b></td>
                    <td><input type="radio" name="jenisKelamin" value="Laki-Laki"  id="1" onclick="HideWoment()" /><font color=white> Laki-Laki 
                        <input type="radio" name="jenisKelamin" value="Perempuan" id="2" onclick="ShowWoment1()"/><font color=white> Perempuan 
                    </td>
                </tr>


                <tr>
                    <td><label><b><font color=white>BERAT BADAN</b></label></td>
                    <td><b><font color=white>:</b></td>
                    <td><input type="text" class="Beratbadan" name="beratBadan" value="" size="3" placeholder="(kg)" pattern="[0-9]{1,3}" required />
                        <span class="form_hint">Masukkan berat maksimal 3 digit</span></td>
                </tr>
                <tr>
                    <td><label><b><font color=white>TINGGI BADAN</b></label>
                    </td><td><b><font color=white>:</b>
                    </td>
                    <td><input type="text" name="tinggiBadan" class="TinggiBadan"  placeholder="(cm)" pattern="[0-9]{1,3}" required />
                        <span class="form_hint">Masukkan berat maksimal 3 digit</span>
                    </td>
                </tr>


                <tr>
                    <td><label><b><font color=white>PERAN AKTIVITAS</b></label></td>
                    <td><b><font color=white>:</b></td><td>
                        <select name="PeranAktivitas">
                            <option value="pilih">--Pilih--</option>
                            <option value="1">Berat (Misal :Olahragawan)</option>
                            <option value="2">Sedang (Misal : Tukang Kayu)</option>
                            <option value="3">Ringan (Misal : Penjahit, Supir, Perawat)</option>
                            <option value="4">Ringan Sekali (Misal : Pasien Rawat Jalan)</option>
                        </select></td>
                </tr>
                <tr id='hideablearea' style='visibility:hidden;'>
                    <td><label><br><b><u><i><font color=white>KETERANGAN</i></u></b></label>
                    </td><td><b></b></td><td>
                </tr>
                <tr >
                    <td id='hideablearea1' style='visibility:hidden;' >
                        <input class="r1" type="checkbox" name="tidak_ada" value="tidakada" id="3" onclick="tidakada()"/>
                        <b><font color=white>Tidak Ada</b>
                    </td>
                </tr >
                <tr id='hideablearea2' style='visibility:hidden;'>
                    <td>
                        <input class="r2"type="checkbox" name="ibu_hamil"  id="4"  onclick="ibuhamil1()"/><label><b><font color=white>Ibu Hamil</b>
                        </label></td><td><b><font color=white> : </b></td>
                    <td>
                        <select class="a1"name="ibuhamil" id="5">
                            <option value="pilihBuMil">--Pilih--</option>
                            <option value="ts1">Tri Semester 1</option>
                            <option value="ts2">Tri Semester 2</option>
                            <option value="ts3">Tri Semester 3</option>
                        </select>
                    </td>
                </tr>
                <tr id='hideablearea3' style='visibility:hidden;'>
                    <td><input class="r3" type="checkbox" name="ibu_menyusui"  id="6" onclick="ibumenyusui1()"/><b><font color=white>Ibu Menyusui</b></td><td><b><font color=white> : </b></td>
                    <td>   
                        <select class="a2"name="ibumenyusui" id ="7">
                            <option value="pilihBuSui">--Pilih--</option>
                            <option value="s1">6 Bulan Pertama</option>
                            <option value="s2">6 Bulan Kedua</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <b> </b>
                    </td>
                    <td><b> </b>
                    </td><td><input type="submit" value="KIRIM"/>
                        <input type="reset" value="RESET"/>
                    </td>
                </tr>

            </table>
    </table>

    <table border="0" cellspacing="5" cellpadding="5" align="center" width="75%" height="20">
        <tr>
            <td width="9%" colspan="3" width="100px" height="40px" align="center" style="font-size:15px" bgcolor="#000000"><span style="color: #FFFFFF;"><i><b>Copyright © 2013. Sistem Informasi Keseimbangan Gizi Bagi Tubuh.</i></b></span></td>
        </tr>
    </table>

</form>
</body>
</html>
